import React from 'react';
import { View, Text, TextInput, StyleSheet, TextInputProps, TouchableOpacity } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { Colors } from '../constants/colors';
import { getPlatformInputStyle } from '../constants/androidStyles';

interface InputFieldProps extends Omit<TextInputProps, 'style'> {
  label: string;
  value: string;
  onChangeText: (text: string) => void;
  right?: React.ReactNode;
  variant?: 'stacked' | 'card'; // card = 左側標籤 + 右側輸入（統一風格）
}

export default function InputField({ label, value, onChangeText, right, variant = 'stacked', ...rest }: InputFieldProps) {
  const isCard = variant === 'card';
  const isLabelMultiline = label && label.includes('\n');
  if (!isCard) {
    return (
      <View style={styles.container}>
        <Text style={[styles.labelTop, isLabelMultiline && styles.labelTopMultiline]}>{label}</Text>
        <View style={styles.row}>
          <TextInput {...rest} value={value} onChangeText={onChangeText} style={[styles.input, getPlatformInputStyle(rest.multiline)]} placeholderTextColor={Colors.gray[400]} />
          {right}
        </View>
      </View>
    );
  }

  return (
    <View style={styles.cardContainer}>
      <View style={[styles.leftRow, rest.multiline && styles.leftRowMultiline]}>
        <View style={[styles.labelContainer, isLabelMultiline && styles.labelContainerMultiline]}>
          {String(label).split('\n').map((line, idx) => (
            <Text key={idx} style={[styles.leftLabel, rest.multiline && styles.leftLabelMultiline]}>{line}</Text>
          ))}
        </View>
        <View style={styles.rightInputRow}>
          <TextInput {...rest} value={value} onChangeText={onChangeText} style={[styles.inputPlain, rest.multiline && styles.inputMultiline, getPlatformInputStyle(rest.multiline)]} placeholderTextColor={Colors.gray[400]} />
          {right}
        </View>
      </View>
    </View>
  );
}

export function EyeToggle({ visible, onToggle }: { visible: boolean; onToggle: () => void }) {
  return (
    <TouchableOpacity onPress={onToggle} style={styles.eyeBtn}>
      <Ionicons name={visible ? 'eye' : 'eye-off'} size={20} color={Colors.gray[500]} />
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: Colors.gray[100],
    borderRadius: 12,
    paddingHorizontal: 16,
    paddingVertical: 12,
  },
  cardContainer: {
    backgroundColor: Colors.white,
    borderRadius: 16,
    paddingHorizontal: 16,
    paddingVertical: 14,
    borderWidth: 1,
    borderColor: Colors.gray[200],
  },
  labelTop: { color: Colors.gray[400], marginBottom: 6, fontSize: 14 },
  row: { flexDirection: 'row', alignItems: 'center' },
  leftRow: { flexDirection: 'row', alignItems: 'center' },
  leftRowMultiline: { alignItems: 'flex-start' },
  leftLabel: { width: 85, color: Colors.gray[600], fontSize: 14 },
  leftLabelMultiline: { paddingTop: 12 },
  rightInputRow: { flex: 1, flexDirection: 'row', alignItems: 'center' },
  input: {
    flex: 1,
    minHeight: 40, // 修复安卓输入框高度问题
    color: Colors.black,
    fontSize: 16,
    textAlignVertical: 'center', // 安卓文本垂直居中
    includeFontPadding: false, // 安卓特有属性，减少字体内边距
  },
  inputPlain: {
    flex: 1,
    minHeight: 40, // 修复安卓输入框高度问题
    color: Colors.black,
    fontSize: 16,
    textAlignVertical: 'center', // 安卓文本垂直居中
    includeFontPadding: false, // 安卓特有属性，减少字体内边距
  },
  inputMultiline: {
    minHeight: 80, // 多行输入框的最小高度
    textAlignVertical: 'top', // 多行文本顶部对齐
    paddingTop: 12, // 添加顶部内边距与label对齐
    paddingBottom: 12, // 添加底部内边距
  },
  eyeBtn: {
    paddingHorizontal: 8,
    height: 32,
    alignItems: 'center',
    justifyContent: 'center',
    marginLeft: 6,
  },
  labelTopMultiline: { lineHeight: 18 },
  labelContainer: { width: 85 },
  labelContainerMultiline: { alignItems: 'flex-start' },
});

